import React, { memo, useEffect, useRef } from 'react'
import { IndicatorWrapper } from './style'

const Indicator = memo((props) => {
  // selectIndex 为当前选中的元素
  const { selectIndex = 0 } = props
  const contentRef = useRef()

  useEffect(() => {
    // 获取当前选中的元素,需要滚动的距离
    // 计算工式: 当前选中的元素的 offsetLeft + (自身 clientWidth / 2) - (最外侧容器的 clientWidth / 2)
    // 获取当前选中的元素
    const selectItemEl = contentRef.current.children[selectIndex]
    const itemOffsetLeft = selectItemEl.offsetLeft
    const itemClientWidth = selectItemEl.clientWidth
    // 获取 content 宽度
    const contentClientWidth = contentRef.current.clientWidth

    let distance = itemOffsetLeft + itemClientWidth / 2 - contentClientWidth / 2

    // 边界判断: 左边的特殊情况处理, distance 如果计算为负数,则不需要移动了
    if (distance < 0) {
      distance = 0
    }

    // 边界判断: 右边的特殊情况处理,从右往左,最多可以移动的距离是 totalDistance
    const contentScrollWidth = contentRef.current.scrollWidth
    const totalDistance = contentScrollWidth - contentClientWidth
    if (distance > totalDistance) {
      distance = totalDistance
    }

    // 改变位置
    contentRef.current.style.transform = `translate(${-distance}px)`
  }, [selectIndex])

  return (
    <IndicatorWrapper>
      <div className="i-content" ref={contentRef}>
        {props.children}
      </div>
    </IndicatorWrapper>
  )
})

export default Indicator
